<template lang="pug">
  form(@submit.prevent="handleSubmit")
    input(type="text", v-model.trim="formData.name" placeholder="name")
    br
    button(type="submit" :disabled="submitDisabled") create scheme
    button(@click="resetFormData") Reset
</template>

<script setup>
import { computed, ref, onMounted, watch, inject } from 'vue';
import api from '../../apis/api'
import { checkFormData } from '../../utils/js.util'

const mainBrandId = inject('mainBrandId')
const formData = ref({
  name: undefined,
  brandId: undefined,
})

const initialFormData = { ...formData.value }
const handleSubmit = async () => {
  console.log(formData.value)
  // const result = await api.post('schemes', { ...formData.value })
  // resetFormData()
};

const resetFormData = () => {
  for (let key in initialFormData) {
    formData.value[key] = initialFormData[key];
  }
};

watch(mainBrandId, async () => {
  formData.value.brandId = mainBrandId.value
})
const submitDisabled = computed(() => !checkFormData(formData.value))
</script>
